<template>
  <div class="v-page-header">
    <div class="page-container bg-color-white">
      <span class="comm-used font12">{{title}}</span>
      <el-tag
        :key="index"
        v-for="(tag,index) in selItemList"
        closable
        :disable-transitions="false"
        @close="delSelItem(tag)" @click.native="getCommonData(tag)" style="margin-right: 10px;">
        {{tag[itemValue]}}
      </el-tag>
      <el-dropdown
        v-if="options.length !== 0"
        trigger="click"
        placement="bottom-start"
        style="position: relative; top: -1px;"
        @command="selVal">
        <el-button size="mini" style="height: 30px;">
          更多<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" class="v-page-header-menu">
          <el-dropdown-item v-if="showDropdown" v-for="item in options" :key="item.key" :command="item[itemKey]">
            {{ item[itemValue] }}
            <i class="iconfont icon-close rf" @click.stop="delItem(item)"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VButton from '../VButton/VButton'
  import ajax from '../../api/ajax/ajax'
  import Msg from '../../assets/js/msg'

  export default {
    name: 'v-page-header',
    components: {
      VButton
    },
    props: {
      // 查询交易码
      InquireTransCode: {
        type: String
      },
      // 设置 / 取消置顶
      setTransCode: {
        type: String
      },
      // 删除常用
      delTransCode: {
        type: String
      },
      // 选项的key
      itemKey: {
        type: String,
        default: 'value'
      },
      // 选项的值
      itemValue: {
        type: String,
        default: 'label'
      },
      // 查询参数
      num: {
        type: String
      },
      // 默认title
      title: {
          type: String,
          default: '常用查询'
      }
    },
    data () {
      return {
        options: [],
        selItemList: [],
        showDropdown: true
      }
    },
    watch: {
      options (val) {
        if (val.length === 0) {
          this.showDropdown = false
        } else {
          this.showDropdown = true
        }
      }
    },
    methods: {
      // 设置置顶
      selVal (val) {
        const params = {
          anal_id: val,
          is_top: 'yes'
        }
        ajax.post(this.setTransCode, params).then(() => {
          ajax.post(this.InquireTransCode, { anal_type: this.num }).then((res) => {
            this.getList(res.data)
          })
        })
      },
      // 取消置顶
      delSelItem (val) {
        const params = {
          anal_id: val.anal_id,
          is_top: 'no'
        }
        ajax.post(this.setTransCode, params).then(() => {
          ajax.post(this.InquireTransCode, { anal_type: this.num }).then((res) => {
            this.getList(res.data)
          })
        })
      },
      // 删除常用
      delItem (item) {
        Msg.confirm('是否删除此常用选项？', {
          onConfirm: () => {
            const params = {
              anal_id: item.anal_id,
              created_by: item.created_by,
              is_invalid: 'no'
            }
            ajax.post(this.delTransCode, params).then(() => {
              ajax.post(this.InquireTransCode, { anal_type: this.num }).then((res) => {
                this.getList(res.data)
              })
            })
          },
          onCancel: () => {}
        })
      },
      getList (list) {
        this.selItemList = []
        this.options = []
        list.forEach(item => {
          if (item.is_top === 'yes') {
            this.selItemList.push(item)
          } else {
            this.options.push(item)
          }
        })
      },
      getCommonData (obj) {
        this.$emit('on-click', obj)
      }
    },
    created () {
      ajax.post(this.InquireTransCode, { anal_type: this.num }).then(res => {
        this.getList(res.data)
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-page-header
    .el-input__inner
     height 30px;
    .page-container
      font-size 0
      width 100%
      height 50px
      line-height 50px
      .comm-used
        color #5A5E66
        margin-right 37px
      .el-tag
        height 30px
        line-height 28px
        cursor pointer
      .el-dropdown
        margin-left 5px
        line-height 30px
        border-radius 4px
        cursor pointer
        .el-dropdown-link
          font-size 12px
          display block
          padding 0 7px
          position relative
          .el-icon--right
            margin-left 0
            position absolute
            right 12px
            top 8 px
  .v-page-header-menu
    .el-dropdown-menu__item
      min-width 100% !important
      font-size 12px
      .icon-close
        margin-left 10px
        font-size 12px
        color #D8DCE5
      .icon-close:hover
        color #8BC4FF
</style>
